<template>
  <div class="profile-container">
      <h1>个人信息</h1>
      <!-- 头像放在正中间，独占一行 -->
      <div class="avatar-container">
          <div class="avatar">
              <img :src="info.profilePicture" />
          </div>
      </div>
      <!-- 三列布局 -->
      <div class="profile-content">
          <div class="info-columns">
              <div class="info-column">
                  <div class="info-item">
                      <label>姓名:</label>
                      <span>{{ info.name }}</span>
                  </div>
                  <div class="info-item">
                      <label>性别:</label>
                      <span>{{ info.gender === 1 ? '男' : '女' }}</span>
                  </div>
                  <div class="info-item">
                      <label>身份证号码:</label>
                      <span>{{ info.idCard }}</span>
                  </div>
                  <div class="info-item">
                      <label>政治面貌:</label>
                      <span>{{ info.politicalAffiliation }}</span>
                  </div>
                  <div class="info-item">
                      <label>出生日期:</label>
                      <span>{{ info.birthDate }}</span>
                  </div>
                  <div class="info-item">
                      <label>民族:</label>
                      <span>{{ info.nationality }}</span>
                  </div>
              </div>
              <div class="info-column">
                  <div class="info-item">
                      <label>籍贯:</label>
                      <span>{{ info.nativePlace }}</span>
                  </div>
                  <div class="info-item">
                      <label>家庭住址:</label>
                      <span>{{ info.homeAddress }}</span>
                  </div>
                  <div class="info-item">
                      <label>所在学院:</label>
                      <span>{{ info.college }}</span>
                  </div>
                  <div class="info-item">
                      <label>所学专业:</label>
                      <span>{{ info.major }}</span>
                  </div>
                  <div class="info-item">
                      <label>学生ID:</label>
                      <span>{{ info.studentId }}</span>
                  </div>
                  <div class="info-item">
                      <label>婚姻状况:</label>
                      <span>{{ info.maritalStatus === 1 ? '未婚' : '已婚' }}</span>
                  </div>
              </div>
              <div class="info-column">
                  <div class="info-item">
                      <label>年级:</label>
                      <span>{{ info.grade }}</span>
                  </div>
                  <div class="info-item">
                      <label>班级名称:</label>
                      <span>{{ info.className }}</span>
                  </div>
                  <div class="info-item">
                      <label>联系方式:</label>
                      <span>{{ info.telephone }}</span>
                  </div>
                  <div class="info-item">
                      <label>QQ号:</label>
                      <span>{{ info.qq }}</span>
                  </div>
                  <div class="info-item">
                      <label>身高:</label>
                      <span>{{ info.height }} 米</span>
                  </div>
                  <div class="info-item">
                      <label>体重:</label>
                      <span>{{ info.weight }} 千克</span>
                  </div>
                  <div class="info-item">
                      <label>视力:</label>
                      <span>{{ info.vision }}</span>
                  </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { getMemberInfo } from '@/api/join-army/join-army';

const props = defineProps({
  modelValue: {
      type: Boolean,
      required: true,
  },
  studentId: {
      type: String,
      required: true
  },
  sourceType: {
      type: String,
      required: true
  }
});

// 监听父组件的 v-model 变化
watch(
  () => props.modelValue,
  (newVal) => {
      if (newVal) {
          // 当父组件重新显示本组件时，调用 conditionPageQuery刷新页面
          getmemberInfo();
      }
  }
);

const getmemberInfo = () => {
  const data = {
      studentIds: [props.studentId],
      type: props.sourceType//表示是预征班成员还是预储成员
  };
  getMemberInfo(data).then(response => {
      info.value = response.data[0];
  }).catch(error => {
      ElMessage.error("获取数据失败！")
      console.log("获取数据失败", error);
  });
}

const info = ref({
  name: '',
  gender: 0,
  idCard: '',
  politicalAffiliation: '',
  profilePicture: '',
  birthDate: '',
  nationality: '',
  maritalStatus: 0,
  religiousAffiliation: '',
  nativePlace: '',
  homeAddress: '',
  mailingAddress: '',
  college: '',
  major: '',
  studentId: '',
  grade: 0,
  className: '',
  telephone: '',
  qq: '',
  height: 0,
  weight: 0,
  vision: '',
  militaryBranch: 0,
  unitNumber: '',
  rankName: '',
  firstEnlistmentDate: '',
  enlistmentDate: '',
  enlistmentPlace: '',
  militarySpecialty: '',
  militaryPosition: ''
});

onMounted(() => {
  //获取个人信息
  getmemberInfo();
});
</script>


<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.profile-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 2rem;
  border-radius: 1rem;
  background: linear-gradient(145deg, #f8f9fa 0%, #e9ecef 100%);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

h1 {
  text-align: center;
  margin-bottom: 1rem;
  color: #2c3e50;
  font-size: 1.5rem;
  letter-spacing: 0.05rem;
}

.avatar-container {
  position: relative;
}

.avatar {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: white;
  padding: 4px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  margin: 0 auto;
}

.avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.info-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.info-column {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 0.8rem;
  padding: 1rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.info-column:hover {
  transform: translateY(-3px);
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
  padding: 0.8rem;
  border-radius: 0.6rem;
  background: rgba(249, 249, 249, 0.7);
}

.info-item label {
  flex: 0 0 40%;
  font-weight: 500;
  color: #34495e;
  font-size: 1rem;
  padding-right: 1rem;
}

.info-item span {
  flex: 1;
  color: #4a5568;
  font-size: clamp(0.9rem, 1vw, 1rem);
  line-height: 1.4;
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media (max-width: 768px) {
  .profile-container {
      margin: 1rem;
      padding: 1rem;
  }

  .info-columns {
      grid-template-columns: 1fr;
  }

  .info-item {
      flex-direction: column;
      gap: 0.4rem;
  }

  .info-item label {
      flex: none;
      width: 100%;
  }

  .info-item span {
      width: 100%;
      -webkit-line-clamp: 3;
  }
}

@media (max-width: 480px) {
  .info-item span {
      font-size: 0.85rem;
  }
}
</style>